<template>
  <div>
    <div class="inp">
      <van-cell-group inset border>
        <van-field v-model="tel" label="手机号" placeholder="请输入手机号" />
      </van-cell-group>
    </div>
    <div class="next">
      <van-button type="block" round color="red" @click="next" :disabled="flag"
        >下一步</van-button
      ><br />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, CellGroup, Button, Dialog } from "vant";
import {doCheckPhone} from "../../api/reg1";

Vue.use(Field);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Dialog);

export default {
  data() {
    return {
      tel: "",
    };
  },
  methods: {
    next() {
      // qAxios.post("/user/docheckphone", { tel: this.tel })
      doCheckPhone({ tel: this.tel }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          localStorage.setItem("tel", this.tel);
          this.$router.push("/register/reg2");
        } else if (res.data.code == 10005) {
          Dialog.confirm({
            message: "您输入的号码已经注册过了，请直接登录",
          })
            .then(() => {
              this.$router.push("/login");
            })
            .catch(() => {
              // on cancel
            });
        }
      });
    },
  },
  computed: {
    flag() {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style>
.next {
  width: 3rem;
  margin: 1rem auto 0.2rem auto;
}
.inp {
  margin: 0.5rem auto;
}
</style>